<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta
            name="viewport"
            content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>
        SceneLayer filter and query | Sample | ArcGIS API for JavaScript 4.18
    </title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        #optionsDiv {
            width: 250px;
            padding: 0 12px 0 12px;
            background-color: white;
            padding: 10px;
        }
    </style>

    <link
            rel="stylesheet"
            href="https://js.arcgis.com/4.18/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.18/"></script>

    <script>
        require([
            "esri/WebScene",
            "esri/views/SceneView",
            "esri/widgets/Legend",
            "esri/widgets/LayerList"
        ], function (WebScene, SceneView, Legend, LayerList) {
            var webScene = new WebScene({
                portalItem: {
                    id: "7685f7ba6b47426ea20d6f640cf98596"
                }
            });

            var view = new SceneView({
                container: "viewDiv",
                map: webScene,
                environment: {
                    lighting: {
                        directShadowsEnabled: false
                    }
                }
            });

            webScene.when(function () {
                // 每层包含建筑物的字段都不同
                // buildingQuery 定义了 web 场景中每一层对应的查询
                /*var buildingQuery = {
                    "Building Wireframe": "BUILDINGID = 'Q'",
                    "Interior Space": "BUILDING = 'Q'",
                    Walls: "BUILDINGKEY = 'Q'",
                    Doors: "BUILDINGKEY = 'Q'"
                };*/

                // 过滤 web 场景中的所有图层以仅包含建筑物 Q
                /*webScene.layers.forEach(function (layer) {
                    //用于过滤特征的 SQL where 子句
                    layer.definitionExpression = buildingQuery[layer.title];
                });*/

                //将按所选楼层过滤的功能
                function showFloors(event) {
                    //检索存储在所选值中的查询
                    var floorQuery = event.target.value;

                    //更新除线框图层以外的所有图层的定义表达式
                    webScene.layers.forEach((layer)=>{
                        if(layer.title !== "Building Wireframe"){
                            layer.definitionExpression= floorQuery;
                        }
                    });
                }

                document
                    .getElementById("floorSelect")
                    .addEventListener("change", showFloors);
            });

            view.ui.add(document.getElementById("optionsDiv"), {
                position: "top-left",
                index: 0
            });
        });
    </script>
</head>

<body>
<div id="viewDiv"></div>
<div id="optionsDiv" class="esri-widget">
    <div>
        <b>按楼层过滤建筑物:</b>
        <select id="floorSelect">
            <option value="1=1">全部</option>
            <option value="FLOOR = '1'">1</option>
            <option value="FLOOR = '2'">2</option>
            <option value="FLOOR = '3'">3</option>
        </select>
    </div>
</div>
</body>
</html>
